/* eslint-disable no-bitwise */
import React, { useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import AudioDance4 from '..';
import styles from './index.module.less';

const Demo = (props) => {
  const { className } = props;

  const audioDanceRef = useRef(null);

  useEffect(() => {
    // setTimeout(() => {
    // setInterval(() => {
    // setTimeout(() => {
    //   if (audioDanceRef.current) {
    //     const arr = [];
    //     for (let i = 0; i < 2; i += 1) {
    //       arr[i * 2] = Math.random() * 100;
    //       arr[i * 2 + 1] = Math.random() * 100;
    //     }
    //     audioDanceRef.current.drawArray(arr);
    //   }
    // }, 100);
    // setInterval(() => {
    //   if (audioDanceRef.current) {
    //     const arr = [];
    //     for (let i = 0; i < 2; i += 1) {
    //       arr[i] = Math.random() * 100;
    //     }
    //     audioDanceRef.current.drawArray(arr);
    //   }
    // }, 100);
    const gradientColors = (colors, outCount) => {
      const gap = outCount / (colors.length - 1);
      const outColors = [];
      for (let i = 1; i < colors.length; i += 1) {
        const s = Math.round(gap * (i - 1));
        const e = Math.round(gap * i);
        // window.console.log(String(colors[i - 1]).slice(1, 3), String(colors[i - 1]).slice(3, 5));
        const r1 = parseInt(String(colors[i - 1]).slice(1, 3), 16);
        const g1 = parseInt(String(colors[i - 1]).slice(3, 5), 16);
        const b1 = parseInt(String(colors[i - 1]).slice(5, 7), 16);
        // window.console.log(r1, g1, b1);
        const r2 = parseInt(String(colors[i]).slice(1, 3), 16);
        const g2 = parseInt(String(colors[i]).slice(3, 5), 16);
        const b2 = parseInt(String(colors[i]).slice(5, 7), 16);
        // window.console.log(r2, g2, b2);
        const rsetp = (r2 - r1) / gap;
        const gstep = (g2 - g1) / gap;
        const bstep = (b2 - b1) / gap;
        for (let l = s; l < e; l += 1) {
          const r = Math.round(r1 + rsetp * (l - s));
          const g = Math.round(g1 + gstep * (l - s));
          const b = Math.round(b1 + bstep * (l - s));
          outColors.push(r);
          outColors.push(g);
          outColors.push(b);
        }
      }
      return outColors;
    };
    const colors = gradientColors(['#0000FF', '#00FF00', '#FF0000'], 256 * 2);
    let palette = new Uint8Array(colors);
    let index = 256;
    setTimeout(() => {
      const offset = index;
      window.console.log(index);
      colors[offset * 3 + 0] = 255;
      colors[offset * 3 + 1] = 255;
      colors[offset * 3 + 2] = 255;
      palette = new Uint8Array(colors);
      index += 1;
      if (index >= 100) {
        index = 0;
      }
    }, 2000000);

    const sourceArr = new Float32Array(1400 * 600);
    for (let i = 0; i < 600; i += 1) {
      for (let j = 0; j < 1400; j += 1) {
        if (/* i > 100 && i < 200 && */ j > 100 && j < 120) {
          sourceArr[i * 1400 + j] = 30;
        } else {
          sourceArr[i * 1400 + j] = 0;
        }
      }
    }

    const a = new Float32Array([80, -20, 50, 51]);
    const buffer = new ArrayBuffer(a.byteLength);
    new Float32Array(buffer).set(a);
    const bv = new Uint8Array(buffer);
    window.console.log(bv);
    function byte2float(bytes, off = 0) {
      const high = bytes[off + 1];
      const low = bytes[off];
      return ((high << 8) & 0xff00) | (low & 0xff);
    }
    byte2float(bv, 0);

    const b = bv;
    let accum = 0;
    accum |= (b[0] & 0xff) << 0;
    accum |= (b[1] & 0xff) << 8;
    accum |= (b[2] & 0xff) << 16;
    accum |= (b[3] & 0xff) << 24;
    window.console.log(accum);

    // function draw() {
    //   if (audioDanceRef.current) {
    //     audioDanceRef.current.drawArray(palette, sourceArr, 1400, 600);
    //   }
    //   requestAnimationFrame(draw);
    // }
    // draw();
    setInterval(() => {
      if (audioDanceRef.current) {
        audioDanceRef.current.drawArray(palette, sourceArr, 1400, 600);
      }
    }, 20);
  }, []);

  return (
    <div className={classnames(styles.root, className)}>
      <AudioDance4 ref={audioDanceRef} />
    </div>
  );
};

Demo.defaultProps = {
  className: null,
};

Demo.propTypes = {
  className: PropTypes.any,
};

export default Demo;
